import { createApp } from 'vue'
import App from './App.vue'
import 'normalize.css'
import '@/assets/styles/common.less'
import router from './router'

import { createPinia } from 'pinia'
const pinia = createPinia()

//懒加载
import { useIntersectionObserver } from '@vueuse/core'
import defaultImg from '@/assets/images/200.png'
// createApp(App).use(router).use(pinia).mount('#app')

import XtxUI from './components'
const app = createApp(App)
app.use(pinia)
app.use(XtxUI)
app.use(router)
app.mount('#app')
// 自定义指令
// <img :src="item.src" alt="" />
// <img v-lazy="item.src" alt="" />
app.directive('lazy', {
    mounted(el: HTMLImageElement, { value }) {
        // 图片的懒加载逻辑
        // 参数1：回调函数
        // 参数2：可选的配置
        const { stop } = useIntersectionObserver(el, ([{ isIntersecting }]) => {
            if (isIntersecting) {
                // 停止监听
                stop()
                // 给el元素设置src属性
                // value = '123.jpg'
                el.src = value
                // 如果图片加载失败，显示默认的图片
                el.onerror = function () {
                    el.src = defaultImg
                }
            }
        })
    }
})